<template>
  <div class="playback">
    <div class="left" id="left">
      <div class="video-wrapper">
        <div id="player"><ReplayPlayer></ReplayPlayer></div>
      </div>
      <div class="question-wrapper">
        <div id="questionAnswer">
          <ReplayQuestionAnswer></ReplayQuestionAnswer>
        </div>
      </div>
    </div>
    <div class="center" id="center" name="center">
      <div class="left-bar" id="leftBar">
        <span class="left-bar-swith"></span>
      </div>
      <div class="document-wrapper">
        <div id="document"><ReplayDocument></ReplayDocument></div>
      </div>
      <div class="thumbnail-wrapper" id="thumbnailWrapper">
        <div id="thumbnail"></div>
      </div>
      <div class="controls-wrapper">
        <div id="controls">
          <ReplayControls></ReplayControls>
        </div>
      </div>
      <div class="right-bar" id="rightBar">
        <span class="right-bar-swith"></span>
      </div>
    </div>
    <div class="right" id="right">
      <div class="chat-wrapper">
        <div id="chat"><ReplayChat></ReplayChat></div>
      </div>
    </div>
  </div>
</template>

<script>
import './common/replayHDScene' //提供Web SDK 观看回放事件、方法、属性
import Utils from './common/utils' //公共方法库
import ReplayControls from './components/replay/controls/controls'
import ReplayChat from './components/replay/chat/chat'
import ReplayDocument from './components/replay/document/document'
import ReplayPlayer from './components/replay/player/player'
import ReplayQuestionAnswer from './components/replay/questionAnswer/questionAnswer'
import { mapState } from 'vuex'
export default {
  components: {
    ReplayControls,
    ReplayChat,
    ReplayDocument,
    ReplayPlayer,
    ReplayQuestionAnswer
  },
  data() {
    return {
      HDScene: window.replayHDScene
    }
  },
  computed: {
    ...mapState({
      getCurrentPlayItem: state => state.course.currentPlayItem,
      userInfo: state => state.user.info,
      token: state => state.user.token
    })
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let ccLive = this.getCurrentPlayItem.section_live
      let user = this.userInfo
      let token = this.token
      let params = {
        userid: ccLive.cc_userid,
        roomid: ccLive.cc_room_id,
        recordid: ccLive.cc_replay_id,
        viewertoken: ccLive.authtype === 0 ? `${token.ak}:${token.sk}` : '',
        viewername: user.nick_name
      }
      //登录
      this.HDScene.login({
        userId: params.userid,
        roomId: params.roomid,
        recordId: params.recordid,
        viewerName: params.viewername,
        viewerToken: params.viewertoken,
        fastMode: true,
        viewercustomua: 'web',
        success(result) {
          Utils.log('登录成功', result)
        },
        fail(error) {
          Utils.log('登录失败', error)
        }
      })
    }
  }
}
</script>

<style lang="scss">
@import './styles/replay.scss';
</style>
